<template>
  <div class="div">
    <back/>
    <div class="qianggou" v-for="(item, index) in liebiao" :key="index">
      <div class="box_img">
        <img :src="item.picture" alt="" />
      </div>
      <div class="text">
        <div class="title">{{ item.name }}</div>
        <div class="tuanjia">￥{{ item.min_price }}</div>
        <div class="jiage">
          ￥{{ item.min_price }}<span>{{ item.promotion_info }}</span>
        </div>
      </div>
      <div class="right">
        <div class="qianggo">马上抢购</div>
        <div class="yisho">已售{{ item.month_saled }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/request";
import back from "@/components/back.vue";
export default {
  components: {
    back,
  },
  data() {
    return {
      liebiao: [],
    };
  },
  mounted() {
    axios.get("/api/tuan/list", { params: { status: 0 } }).then((res) => {
      console.log(res.data.list);
      this.liebiao = res.data.list;
    });
  },
};
</script>

<style lang="scss">
.qianggou {
  position: relative;
  width: 95%;
  height: 150px;

  margin: 10px;
  border-radius: 10px;
  display: flex;

  .box_img {
    padding: 10px;
    width: 130px;
    height: 130px;

    border-radius: 10px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .text {
    .title {
      font-size: 20px;
      font-weight: bold;
      height: 40px;
    }
    .tuanjia {
      height: 25px;
    }
    .jiage {
      height: 25px;
      color: red;
      padding: 5px;
      font-size: 20px;
    }
  }
  .right {
    position: absolute;
    right: 0px;
    bottom: 20px;
    width: 100px;
    height: 80px;

    .qianggo {
      position: absolute;
      top: 10px;
      width: 100px;
      height: 40px;
      border-radius: 20px;
      background: red;
      text-align: center;
      line-height: 40px;
    }
    .yisho {
      position: absolute;
      bottom: 0px;
      width: 100px;
      height: 20px;

      text-align: center;
      line-height: 20px;
    }
  }
}
</style>